<template>
  <div class="con">
    <div class="contbox6_10">
      <p class="titlelist6_10">
        积分管理
        <span style="color: #999">&nbsp;&nbsp;/&nbsp;&nbsp;</span>机构积分列表
      </p>
      <div class="content">
        <div class="sousuojg6_10">
          <el-form :model="form" label-width="100px">
            <el-form-item label="机构名称">
              <el-input
                placeholder="请输入机构名称"
                v-model="data.officeName"
              ></el-input>
            </el-form-item>
            <el-form-item label="机构ID">
              <el-input
                placeholder="请输入机构ID"
                v-model="data.officeUid"
              ></el-input>
            </el-form-item>
            <!-- <el-form-item label="归属机构">
              <el-input
                placeholder="请输入归属机构"
                v-model="data.officeUid"
              ></el-input>
            </el-form-item> -->
            <!-- <el-form-item label="归属OEM">
              <el-input
                placeholder="请输入机构名称"
                v-model="form.officeName"
              ></el-input>
            </el-form-item> -->
            <el-form-item label="更新时间">
              <div style="display: flex">
                <el-date-picker
                  type="date"
                  value-format="yyyy-MM-dd"
                  placeholder="开始日期"
                  v-model="data.startDate"
                  style="width: 100%"
                ></el-date-picker>
                <div class="times">&nbsp;&nbsp;-&nbsp;&nbsp;</div>
                <el-date-picker
                  type="date"
                  value-format="yyyy-MM-dd"
                  placeholder="结束日期"
                  v-model="data.endDate"
                  style="width: 100%"
                ></el-date-picker>
              </div>
            </el-form-item>
          </el-form>
          <div style="clear: both"></div>
          <div style="margin-left: 30px; margin-top: 10px">
            <el-button type="primary" @click="submit">搜索</el-button>
            <el-button @click="rest">重置</el-button>
            <!-- <el-dropdown @command="handleCommand">
              <el-button size="mini" type="primary" plain>
                新建规则<i class="el-icon-arrow-down el-icon--right"></i>
              </el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="new">兑换商品</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown> -->
          </div>
        </div>
        <el-table
          style="margin-top: 30px"
          :data="tableData"
          tooltip-effect="dark"
          :header-cell-style="{ background: '#F9FAFC', color: '#222' }"
          stripe
          border
          :row-style="{ height: '0px' }"
          :cell-style="{ padding: '0px' }"
          ref="multipleTable"
        >
          <el-table-column
            min-width="200"
            label="机构ID"
            prop="objUid"
          ></el-table-column>
          <el-table-column
            min-width="200"
            label="机构名称"
            prop="officeName"
          ></el-table-column>
          <!-- <el-table-column
            min-width="200"
            label="归属机构"
            prop="channelName"
          ></el-table-column> -->
          <!-- <el-table-column
            min-width="200"
            label="归属OEM"
            prop="channelName"
          ></el-table-column> -->
          <el-table-column
            min-width="200"
            label="账户积分"
            prop="totalAmt"
          ></el-table-column>
          <el-table-column
            min-width="200"
            label="已用积分"
            prop="outAmt"
          ></el-table-column>
          <el-table-column
            min-width="200"
            label="可用积分"
            prop="availAmt"
          ></el-table-column>
          <el-table-column
            min-width="200"
            label="冻结积分"
            prop="freezeAmt"
          ></el-table-column>
          <el-table-column
            min-width="200"
            label="更新时间"
            prop="updateDate"
          ></el-table-column>
          <el-table-column min-width="200" label="操作">
            <template slot-scope="scope">
              <div>
                <el-button type="text" @click="errors(scope.row)"
                  >差错</el-button
                >
                <el-button type="text" @click="frozen(scope.row)"
                  >冻结</el-button
                >
              </div>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="data.currPage"
          :page-sizes="[20, 50, 100]"
          :page-size="20"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
    <!-- 差错金额 -->
    <el-dialog
      title="设置积分"
      :visible.sync="dialogVisible"
      width="500px"
      :before-close="handleClose"
    >
      <div style="padding-left: 30px">
        <div class="lister">
          <div class="listTitle">机构名称：</div>
          <el-input
            v-model="infos.officeName"
            class="inputs"
            disabled
            placeholder="请输入内容"
          ></el-input>
        </div>
        <div class="lister">
          <div class="listTitle">积分总额：</div>
          <el-input
            v-model="infos.totalAmt"
            class="inputs"
            disabled
            placeholder="请输入内容"
          ></el-input>
        </div>
        <div class="lister">
          <div class="listTitle">可用积分：</div>
          <el-input
            v-model="infos.availAmt"
            class="inputs"
            disabled
            placeholder="请输入内容"
          ></el-input>
        </div>
        <div class="title" style="margin-top: 10px; margin-bottom: 10px">
          设置冻结金额
        </div>
        <div class="lister">
          <div class="listTitle">{{ text }}类别：</div>
          <el-select
            v-model="data1.operType"
            class="inputs2"
            placeholder="请选择"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <div class="lister">
          <div class="listTitle">{{ text }}金额：</div>
          <el-input
            class="inputs"
            v-model="data1.actualAmt"
            @input="
              (value) => {
                data1.actualAmt = value.replace(
                  /^\D*(\d*(?:\.\d{0,2})?).*$/g,
                  '$1'
                );
              }
            "
            placeholder="请输入内容"
          ></el-input>
        </div>
        <div class="lister">
          <div class="listTitle">备注说明：</div>
          <el-input
            v-model="data1.remarks"
            class="inputs2"
            placeholder="请输入内容"
          ></el-input>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="submit1">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 冻结金额 -->
  </div>
</template>

<script>
import axios from "axios";
import { currentDate, sevenData, CompareDate } from "../../assets/js/commion";

export default {
  data() {
    return {
      infos: "",
      text: "",
      // 判断差错还是冻结
      types: "",
      options: "",
      total: "", //总条数
      values: "1",
      //   控制差错弹框
      dialogVisible: false,
      // 表格数据
      tableData: "",
      // 表格
      list: [
        {
          channelName: "123",
        },
      ],
      //   列表查询的数据
      data: {
        startDate: "",
        endDate: "",
        officeUid: "",
        officeName: "",
        pageSize: 20, //一页几条
        currPage: 1, //第几页
      },
      // 弹框传递的字段
      data1: {
        uid: "", //那一条账户
        operType: "", //弹框下拉选择的
        actualAmt: "", //差错金额
        remarks: "", //备注
      },
      form: {
        officeName: "",
        startDate: "",
        endDate: "",
      },
    };
  },
  created() {
    this.data.startDate = "";
    this.data.endDate = "";
    this.getData();
  },
  methods: {
    // 弹窗关闭
    handleClose() {
      this.dialogVisible = false;
      this.data1.uid = "";
      this.data1.operType = "";
      this.data1.actualAmt = "";
      this.data1.remarks = "";
    },

    // 获取下拉框菜单
    getSelectMenu() {
      axios
        .post("api/sys/dict/queryDictList", { type: this.types })
        .then((res) => {
          console.log("下拉");
          console.log(res);
          this.options = res.data.data;
        })
        .catch((err) => {
          console.log(err);
        });
    },

    rest() {
      this.form.currPage = 1;
      this.data.officeName = "";
      this.data.startDate = "";
      this.data.endDate = "";
      this.data.officeUid = "";
      this.getData();
    },

    // 改金额 确定
    submit1() {
      if (this.data1.operType == "" || this.data1.actualAmt == "") {
        layer.open({
          content: "数据不能为空",
          skin: "msg",
          time: 1, //1秒后自动关闭
        });
        return false;
      }
      axios
        .post("scoAccountInfo/modifyAmount", this.data1)
        .then((res) => {
          console.log("调用");
          console.log(res);
          if (res.data.code == "0000") {
            layer.open({
              content: res.data.msg,
              skin: "msg",
              time: 1, //1秒后自动关闭
            });
            this.getData();
            this.dialogVisible = false;
          } else {
            layer.open({
              content: res.data.msg,
              skin: "msg",
              time: 1, //1秒后自动关闭
            });
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 差错
    errors(val) {
      this.data1.uid = "";
      this.data1.operType = "";
      this.data1.actualAmt = "";
      this.data1.remarks = "";
      console.log(val);
      this.infos = val;
      this.text = "差错";
      this.types = "office_oper_type_sub";
      this.data1.uid = val.uid;
      this.getSelectMenu();
      this.dialogVisible = true;
    },
    // 冻结
    frozen(val) {
      this.data1.uid = "";
      this.data1.operType = "";
      this.data1.actualAmt = "";
      this.data1.remarks = "";
      this.infos = val;
      this.text = "操作";
      this.types = "office_oper_type_f";
      this.data1.uid = val.uid;
      this.getSelectMenu();
      this.dialogVisible = true;
    },
    // 搜索
    submit() {
      console.log(this.data.startDate, this.data.endDate);
      if (this.data.startDate != "" && this.data.endDate != "") {
        if (CompareDate(this.data.startDate, this.data.endDate)) {
          this.data.currPage = 1;
          this.getData();
        } else {
          layer.open({
            content: "结束时间不能早于开始时间",
            skin: "msg",
            time: 1, //1秒后自动关闭
          });
        }
      } else {
          this.getData();
        
      }
    },
    //   获取数据
    getData() {
      axios
        .post("scoAccountInfo/accountList", this.data)
        .then((res) => {
          console.log("获取的数据");
          console.log(res);
          if (res.data.code == "500") {
            layer.open({
              content: res.data.msg,
              skin: "msg",
              time: 1, //1秒后自动关闭
            });
          }
          this.tableData = res.data.data.records;
          this.total = Number(res.data.data.total);
        })
        .catch((err) => {
          console.log(err);
        });
    },

    handleCommand(command) {
      console.log(command);
    },
    // 第几页
    handleCurrentChange(val) {
      console.log(val);
      this.data.currPage = val;
    },
    // 每页几条
    handleSizeChange(val) {
      console.log(val);
      this.data.pageSize = val;
    },
  },
};
</script>

<style scoped>
.el-dropdown {
  vertical-align: top;
}
.el-dropdown + .el-dropdown {
  margin-left: 15px;
}
.el-icon-arrow-down {
  font-size: 12px;
}
.lister {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
/deep/ .inputs {
  width: 320px;
}
/deep/ .inputs2 {
  width: 320px;
}
/deep/ .inputs2 .el-input {
  width: 100%;
}
/deep/ .inputs2 .el-input__inner {
  width: 100%;
}
/deep/ .inputs .el-input__inner {
  width: 100%;
}
</style>